<template>
  <div v-if="isOpen">
    <Modal
      transfer
      draggable
      footer-hide
      :mask="false"
      :width="330"
      class-name="modal-count-wrap"
      v-model="isOpen"
    >
      <div slot="header">计数统计</div>
      <table class="table count-table" style="min-width: 300px">
        <tr class="count-table-title">
          <th>
            <Input v-model="tit1"></Input>
          </th>
          <th class="w60">
            <Input v-model="tit2" style="width: 48px"></Input>
            <TableSort
              :order="getSortOrder('count')"
              @changeSort="changeSort('count', $event)"
            ></TableSort>
          </th>
          <th class="w80">
            <Checkbox v-model="isShowMoreOperate">操作</Checkbox>
          </th>
        </tr>
        <tr v-for="(item, index) in showList" :key="'list_' + index">
          <td>
            <Input v-model="item.name"></Input>
          </td>
          <td>
            <InputNumber v-model="item.count"></InputNumber>
          </td>
          <td class="center">
            <Tooltip content="添加">
              <Icon
                class="pointer"
                type="md-add-circle"
                :size="20"
                @click="addLine(index)"
              />
            </Tooltip>
            <Tooltip class="mar4l" content="删除" v-if="isShowMoreOperate">
              <Icon
                class="pointer red"
                type="md-remove-circle"
                :size="20"
                @click="delLine(index)"
                v-if="showList.length > 1"
              />
            </Tooltip>
          </td>
        </tr>
      </table>
    </Modal>
  </div>
</template>

<script>
export default {
  props: [],
  data() {
    return {
      tit1: "名称",
      tit2: "数量",
      isOpen: true,
      showList: [],
      sortKey: "count",
      sortOrder: "asc",
      isShowMoreOperate: false,
    };
  },
  watch: {
    isOpen(newval) {
      if (!newval) {
        this.$emit("close");
      }
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.addLine();
    },
    addLine(index) {
      let item = this.getNewItem();
      if (index === undefined) {
        this.showList.push(item);
      } else {
        this.showList.splice(index + 1, 0, item);
      }
    },
    delLine(index) {
      this.showList.splice(index, 1);
    },
    getNewItem() {
      return {
        name: "",
        count: 1,
      };
    },
    // 更改排序
    changeSort(key, order) {
      this.sortKey = key;
      this.sortOrder = order;
      this.showList.sort((a, b) => {
        if (order === "asc") {
          return a.count > b.count ? 1 : -1;
        }
        return a.count < b.count ? 1 : -1;
      });
    },
    // 获取排序order
    getSortOrder(key) {
      if (key === this.sortKey) {
        return this.sortOrder;
      }
      return "";
    },
  },
};
</script>

<style lang="less">
.modal-count-wrap {
  .ivu-modal {
    position: absolute;
    left: 20px;
  }
  .ivu-modal-content {
    border: 1px solid #fff;
    // background-color: #eaeff7;
    .ivu-modal-close {
      top: 4px;
      right: 4px;
    }
    .ivu-modal-header {
      font-size: 14px;
      font-weight: 600;
      padding: 12px;
      color: #f00;
      background-color: #c8c8c9;
    }
    .ivu-modal-body {
      padding: 0px;
    }
    // position: absolute;
    // left: 20px;
  }
}
.count-table {
  background-color: #eaeff7;
  border: 1px solid rgba(255, 255, 255, 0.6);
  tr {
    td,
    th {
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.6);
    }
    input,
    .ivu-input-number {
      background-color: transparent;
      border: 0;
      font-weight: 600;
    }
    &:nth-child(2n + 1) {
      background-color: #d2dfef;
      input {
        background-color: #d2dfef;
      }
    }
    &.count-table-title {
      color: #fff;
      background-color: #5b9bd5;
      input,
      .ivu-input-number {
        color: #fff;
        background-color: transparent;
      }
    }
  }
}
</style>
